<template>
  <nav-bar class="msite-nav-bar">
    <div class="left" slot="left" @click="handleSkipSearch">
      <svg class="svg">
        <use xlink:href="#search" />
      </svg>
    </div>
    <div class="center" slot="center" @click="handleSkipHome">{{ title }}</div>
    <div class="right" slot="right">
      <img
        src="~assets/img/home/profile.png"
        alt=""
        v-show="isShow"
        @click="handleSkipProfile"
      />
      <span class="text" v-show="!isShow" @click="handleSkipLogin"
        >登录/注册</span
      >
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  props: {
    title: {
      type: String,
      default() {
        return "";
      },
    },
  },
  created() {
    this.isShow = localStorage.getItem("user_id") !== null ? true : false;
  },
  activated() {
    this.isShow = localStorage.getItem("user_id") !== null ? true : false;
  },
  methods: {
    handleSkipSearch() {
      this.$router.push("/search");
    },
    handleSkipHome() {
      this.$router.push("/home");
    },
    handleSkipLogin() {
      this.$router.push("/login");
    },
    handleSkipProfile() {
      this.$router.push("/profile");
    },
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
.msite-nav-bar {
  display: flex;
  padding-right: 15px;
  background-color: var(--color-tint);
  color: #fff;
  .left {
    .svg {
      width: 60px;
      height: 150px;
    }
  }
  .center {
    width: 180px;
    margin-left: 10px;
    font-weight: bold;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .right {
    text-align: right;
    img {
      width: 50%;
    }
    .text {
      white-space: nowrap;
    }
  }
}
</style>